<template>
	<div style="width: 92%;margin: 0 auto 20px;">
		<div v-if="forumList==0">
			<van-empty class="custom-image" image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
				description="暂时没有关注" />
		</div>
		<div v-for="(item,i) in forumList" :key="i">
			<div style="display: flex;margin-top: 1rem;justify-content: space-between;align-items: center;">
				<div style="display: flex;" @click="onForumDetail(item.product_id)">
					<img :src="APIDomainName +item.pic" style="width: 5rem;border-radius: 25px;height: 5rem;" alt="">
					<div style="display: flex;align-items: center;">
						<div style="position: relative;">
							<div style="margin-left: 0.5rem;font-size: 20px;">
								{{item.title}}
							</div>
							<div style="margin-top: 1rem;margin-left: 0.5rem;font-size: 15px;color: #989898;">
								{{item.concern}}
							</div>
						</div>
					</div>
				</div>
				<div @click="onclick(item.product_id)">
					<div v-if="is_checked.indexOf(item.product_id)!=-1">
						<button  style="width: 5.6rem;height: 2.4rem;color: #14c5cd;border-radius: 30px;font-size: 16px;
					background-color: #f3f3f3;border:0;font-weight: bold;color: #989898;">
							已关注
						</button>
					</div>
					<div v-else>
						<button style="width: 5.6rem;height: 2.4rem;color: #14c5cd;border-radius: 30px;font-size: 16px;
				background-color: #ecfafb;border: 0;font-weight: bold;">
							关注
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		searchConcernForumAPI,
		deleteConcernForumItemAPI,
		addConcernForumAPI
	} from '@/api/forum.js';
	export default {
		data() {
			return {
				forumList: [],
				is_checked: [],
			}
		},
		created() {
			this.concernForum();
		},
		methods: {
			  onclick( id) {
			      let list = this.is_checked;
			      if (list.indexOf(id) == -1) {
			        // 加到数组中
			        this.is_checked.push(id);
					let params = {
						product_id: id,
					}
					//2.使用封装后的接口,注意：接口有参数
					addConcernForumAPI(params).then(result => {
						this.$toast(result.msg);
					}).catch(() => {});
			      } else {
			        for (var i in this.is_checked) {
			          if (this.is_checked[i] == id) {
			            this.is_checked.splice(i, 1);
			          }
					  let ids = id;
					  deleteConcernForumItemAPI(ids).then(result => {
					  	this.$toast(result.msg);
					  }).catch(() => {});
			        }
			      }
			    },
			concernForum() {
				this.is_checked=[];
				searchConcernForumAPI().then(result => {
					console.log(result.data)
					this.forumList = result.data;
					result.data.forEach(item => {
						this.is_checked.push(item.product_id);
						console.log(this.is_checked);
					});
				}).catch(() => {});
			},
			
		}
	}
</script>

<style>
	.custom-image .van-empty__image {
		width: 100px;
		height: 100px;
		margin-top: 5rem;
	}
</style>
